<template>
	<div class="news_list_wrapper">
		<div class="list">
			<dl v-for="(item, index) in listDatas" :key="index">
				<dt>
					<span></span>
				</dt>
				<dd>
					<h4>
						<router-link :to="{ path: `${routerPath}/${item.id}` }">{{ item.title }}</router-link>
					</h4>
					<p>
						<span>{{ item.pubDate }}</span>
						<i class="el-icon-view">{{ item.clickCount }}</i>
					</p>
				</dd>
			</dl>
		</div>
		<sw-pagination :total="dataCount" :page.sync="listQuery.page" :limit.sync="listQuery.limit" notice="数据" @change="getNewsListData"></sw-pagination>
	</div>
</template>

<script>
export default {
	props: ['columnId', 'departId'],
	data() {
		return {
			dataCount: 0,
			listQuery: {
				page: 1,
				limit: 10,
				deptId: '',
				sort: 'create_time desc'
			},
			departData: [],
			kcIdList: [],
			listDatas: []
		};
	},
	computed: {
		routerPath() {
			return this.$route.path;
		}
	},
	watch: {
		departId(val) {
			this.getNewsListData();
		}
	},
	mounted() {
		this.getNewsListData();
	},
	methods: {
		//获取
		
		//获取文件机关动态数据
		async getNewsListData() {
			let params = { ...this.listQuery, classifyId: this.columnId, deptId: this.departId };
			let result = await this.$store.dispatch('getNewsData', params);
			if(result.code === '0'){
				this.dataCount = parseInt(result.count);
				this.listDatas = result.data || [];
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.news_list_wrapper {
	display: flex;
	flex-direction: column;
	padding-bottom: 64px;
	box-sizing: border-box;

	.dept {
		margin: 20px 0px;

		dl {
			border: solid 1px #e7e7e7;
			display: flex;

			dt {
				border-right: solid 1px #e7e7e7;
				padding: 20px 20px;
			}

			dd {
				padding: 20px 10px;

				a {
					padding: 10px;
					cursor: pointer;
				}
			}
		}
	}

	.list {
		flex: 1;
		overflow: hidden;
		padding-bottom: 40px;

		dl {
			display: flex;
			align-items: flex-start;
			padding: 10px 0;
			border-bottom: solid 1px #e7e7e7;
		}

		dt {
			margin-right: 15px;

			span {
				display: block;
				width: 8px;
				height: 8px;
				margin-top: 23px;
				border-radius: 50%;
				background-color: #357c65;
			}

			img {
				display: block;
				width: 128px;
				height: 96px;
				object-fit: cover;
			}
		}

		dd {
			flex: 1;
			padding: 10px 0;
			overflow: hidden;
		}

		h4 {
			height: 32px;
			line-height: 32px;
			font-size: 20px;
			font-weight: normal;
			white-space: nowrap;
			text-overflow: ellipsis;
			overflow: hidden;

			a {
				color: #333;
				text-decoration: none;

				&:hover {
					color: #357c65;
					border-bottom: solid 1px #357c65;
				}
			}
		}

		p {
			color: rgba(0, 0, 0, 0.3);
			margin-top: 24px;

			span {
				margin-right: 20px;
			}

			i.el-icon-view::before {
				margin-right: 6px;
			}
		}
	}
}
</style>